<title>文章列表</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>内容管理</cite></a>
        <a><cite>文章列表</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-body" style="padding: 5px;">
                    <fieldset class="layui-elem-field layui-field-title"> <legend>栏目</legend></fieldset>
                    <ul class="layui-menu" id="LAY-content-articles-menus">
                        <div class="layui-none">无数据</div>
                    </ul>
                </div>
            </div>
        </div>

        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-body layui-form" lay-filter="LAY-content-articles-searchForm">
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <input type="text" name="keywords" placeholder="请输入关键词" class="layui-input">
                        </div>
                        <div class="layui-input-inline">
                            <button type="button" class="layui-btn" lay-submit lay-filter="LAY-content-articles-search"> <i class="layui-icon layui-icon-search"></i> </button>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body">
                    <table id="LAY-content-articles-manage" lay-filter="LAY-content-articles-manage"></table>
                    <script type="text/html" id="LAY-content-articles-toolbar">
                        <div class="layui-btn-container">
                            {{# if (AppGeneral.userCan('content.column.destroy')) { }}
                            <btton class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i class="layui-icon layui-icon-delete"></i> </btton>
                            {{# } }}
                            {{# if (AppGeneral.userCan('content.column.create')) { }}
                            <btton class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i> </btton>
                            {{# } }}
                        </div>
                    </script>
                    <script type="text/html" id="LAY-content-articles-tool">
                        <div class="layui-btn-group">
                            {{# if (AppGeneral.userCan('content.column.edit')) { }}
                            <btton class="layui-btn layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></btton>
                            {{# } }}
                        </div>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['admin', 'baseMethods'], function () {
        const {$,table,layer,form,baseMethods} = layui, tableId = 'LAY-content-articles-manage';
        let ArticleCache = JSON.parse(sessionStorage.getItem('ArticleCache'))||{}, groupId = ArticleCache.categoryId||0;
        const tableIns = baseMethods.table({
            elem: '#'+tableId,
            url: '/content/articles/list',
            where: {groupId},
            toolbar: '#LAY-content-articles-toolbar',
            cols: [[
                {checkbox: true,fixed: true},
                {field: 'sort', title: '排序', width: 100, sort: !0},
                {field: 'thumb', title: '缩略图', event:'preview', unresize: true, width: 90,
                    templet: function (d) {
                        return '<img src="'+AppGeneral.storage(d.thumb)+'" alt="" width="30" height="30" onerror="AppGeneral.imgError(this)">'
                    }
                },
                {field: 'title', title: '标题'},
                {field: 'status', title: '状态', unresize: true, width: 100, align: 'center',
                    templet: function (data) {
                        return parseInt(data.status) === 1 ? '<span class="layui-badge layui-bg-green">显示</span>' : '<span class="layui-badge layui-bg-orange">隐藏</span>';
                    }
                },
                {field: 'created_at', title: '添加时间', width: 180},
                {field: 'updated_at', title: '修改时间', width: 180},
                {fixed: 'right', width: 120, align:'center', templet: '#LAY-content-articles-tool'}
            ]]
        });
        baseMethods.request({
            url: '/content/column/list',
            done: function (result) {
                if (result.code === 200) {
                    let data = result.data;
                    data.rows.unshift({id: 0, name: '所有'});
                    $('#LAY-content-articles-menus').html(`${data.rows.map(item=>{
                        return `<li lay-options="{id: ${item.id}, name: '${item.name}'}" ${groupId === item.id && 'class="layui-menu-item-checked"'}>
                                    <div class="layui-menu-body-title">${item.name}</div>
                                </li>`;
                    }).join('')}`);
                    $("#LAY-content-articles-menus").on("click", 'li', function () {
                        let options = AppGeneral.options($(this).attr('lay-options'));
                        groupId = options.id;
                        sessionStorage.setItem('ArticleCache', JSON.stringify({categoryId: groupId, categoryName: options.name}));
                        tableIns.reloadData({
                            where: {groupId},
                            page: {curr: 1},
                        });
                    })
                }
            }
        })
        const tableTools = {
            add: function () {
                baseMethods.adminLayer(
                    {title: '添加', area: ['850px', '680px'], id: 'LAY-popup-content-articles-form'},
                    {tpl: 'content/articles/form', id: 'LAY-content-articles-form'},
                    {
                        url: '/content/articles/store',
                        type: "post",
                        success: function () {
                            tableIns.reloadData();
                        }
                    },
                );
            },
            edit: function (obj) {
                let data = obj.data;
                baseMethods.adminLayer(
                    {title: '编辑', area: ['850px', '680px'], id: 'LAY-popup-content-articles-form'},
                    {tpl: 'content/articles/form', mode: 'edit', data, id: 'LAY-content-articles-form'},
                    {
                        url: `/content/articles/${data.id}/update`,
                        type: "put",
                        success: function (field) {
                            obj.update(field)
                        }
                    },
                );
            },
            preview: function (obj) {
                let data = obj.data;
                if (!data.thumb) return false;
                layer.photos({
                    area: ['600px', '400px'],
                    photos: { title: "查看", data: [{src: AppGeneral.storage(data.thumb)}] },
                    shade: .01,
                    closeBtn: 1,
                    anim: 5
                });
            },
            delete: function () {
                let hasCheck = table.checkStatus(tableId), hasCheckData = hasCheck.data;
                if (hasCheckData.length > 0) {
                    let ids = hasCheckData.map(item => item.id);
                    baseMethods.toolOpera(`确认删除选中的 ${hasCheckData.length} 项吗？`, {
                        url: '/content/articles/destroy',
                        type: "delete",
                        data: {ids},
                        success: function () {
                            tableIns.reloadData();
                        }
                    })
                    return true;
                }
                layer.msg('请选择操作项', {icon: 5});
            }
        };
        table.on('toolbar('+tableId+')', function(obj) {
            tableTools[obj.event] && tableTools[obj.event].call(this);
        });
        table.on('tool('+tableId+')', function (obj) {
            tableTools[obj.event] && tableTools[obj.event].call(this, obj);
        });
        form.on('submit(LAY-content-articles-search)', function(data) {
            data.field.groupId = groupId;
            tableIns.reloadData({
                where: data.field,
                page: {curr:1}
            })
        });
    });
</script>